/** * @name 菜单卡片 * @description: * @param * @return */
<template>
	<view class="menuCard">
		<!-- 其他类型 -->
		<template v-if="type === '其他'">
			<div class="type">{{ type }}</div>
			<view v-for="(item, index) of menuList" :key="index">
				<view class="content" @click="clickOtherMenu(item, index)">
					<view class="img"><image :src="baseURL + item.pic"></image></view>
					<view class="text">
						<view class="name">{{ item.title }}</view>
						<view class="description">{{ item.description }}</view>
						<view class="isHot">{{ item.isspicy == 1 ? '辣' : '' }}</view>
						<u-checkbox-group class="checkbox" @change="checkboxGroupChange">
							<view v-if="!bool" class="othersBox1">
								<view>￥{{ item.price }}</view>
								<u-checkbox v-model="item.checked" :name="item.title" active-color="#fe4b3c"></u-checkbox>
							</view>
							<view v-else class="othersBox2">
								<view style="margin-right: 40rpx;"><u-checkbox v-model="item.checked" :name="item.title" active-color="#fe4b3c"></u-checkbox></view>
							</view>
						</u-checkbox-group>
					</view>
				</view>
			</view>
		</template>

		<!-- 不是其他类型 -->
		<template v-else>
			<div class="type">{{ type }}</div>
			<u-radio-group v-model="value">
				<view v-for="(item, index) in menuList" :key="index">
					<view class="content" @click="clickMenu(item, index)">
						<view class="img"><image :src="imgUrl(item.pic)"></image></view>
						<view class="text">
							<view class="name">{{ item.title }}</view>
							<view class="description">{{ item.description }}</view>
							<view class="isHot">{{ item.isspicy == 1 ? '辣' : '' }}</view>
							<view class="price">
								<view style="margin-right: 40rpx;">
									<u-radio @change="radioChange(item)" :key="index" :name="item.name" shape="square" active-color="#fe4b3c"></u-radio>
								</view>
							</view>
						</view>
					</view>
				</view>
			</u-radio-group>
		</template>
	</view>
</template>

<script>
import httpRequest from '@/api/apiConfig.js';
export default {
	props: {
		menu: {
			//菜单
			type: Array,
			required: true
		},
		type: {
			//类型
			type: String,
			required: true
		}
	},
	inject: ['isSign'], //是否签约
	data() {
		return {
			bool: '', //是否显示
			menuList: '', //菜单
			value: '', //选中的值
			e: '',
			arr: [],
			current: '',
			checkboxList: [],
			baseURL: '' //基本地址
		};
	},
	watch: {
		menu: function fn() {
			this.filterMenu(this.menu);
		}
	},
	methods: {
		//点击其他类型的菜单
		clickOtherMenu(item, index) {
			item.checked = !item.checked;
			let arr = [];
			this.menuList.forEach(item => {
				if (item.checked) {
					arr.push(item);
				}
			});
			this.$emit('checkMenu', arr);
		},
		//点击不是其他类型的菜单
		clickMenu(item, index) {
			this.value = item.name;
			this.$emit('checkMenu', item);
		},
		filterMenu(arr) {
			//过滤菜单
			arr.map(item => {
				return (item.checked = false);
			});
			this.menuList = arr;
		},
		radioChange(item) {
			//单选
			this.$emit('checkMenu', item);
		},
		checkboxGroupChange(e) {
			let arr = [];
			this.menuList.forEach(items => {
				e.forEach(item => {
					if (items.name === item) {
						arr.push(items);
					}
				});
			});
			this.$emit('checkMenu', arr);
		}
	},
	created() {
		this.bool = this.isSign;
		this.filterMenu(this.menu);
		this.baseURL = httpRequest.config.baseURL;
	}
};
</script>

<style lang="scss" scoped>
.menuCard {
	// 类型
	.type {
		text-align: center;
		font-size: 32rpx;
		margin-bottom: 20rpx;
		border-bottom: 1px solid #e1e1e1;
		padding: 20rpx 0;
	}

	.content {
		//内容盒子样式
		display: flex;
		border-bottom: 1px solid #e1e1e1;
		padding: 10rpx 0;

		.img {
			width: 200rpx;

			image {
				border-radius: 30rpx;
				width: 200rpx;
				height: 200rpx;
			}
		}

		.text {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			position: relative;
			height: 200rpx;
			width: 100%;

			.name {
				//菜名样式
				width: 100%;
				padding: 0rpx 40rpx;
				font-weight: 600;
				font-size: 30rpx;
			}

			.isHot {
				//是否为辣样式
				width: 100%;
				padding: 0rpx 40rpx;
				font-size: 24rpx;
				color: #ff0000;
			}

			.price {
				//无标价样式
				width: 100%;
				display: flex;
				justify-content: flex-end;
			}

			.othersBox1 {
				width: 100%;
				display: flex;
				padding: 0 40rpx;
				justify-content: space-between;
				font-size: 28rpx;
				color: #878787;
			}

			.othersBox2 {
				width: 100%;
				display: flex;
				padding: 0 40rpx;
				justify-content: flex-end;
			}

			.description {
				width: 60%;
				padding-left: 40rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				color: #878787;
			}
		}
	}
}
</style>
